<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import PageHeader from '@/components/common/PageHeader.vue';

const router = useRouter();
const phone = ref('');
const password = ref('');
const loading = ref(false);

const onSubmit = async () => {
    if (!phone.value || !password.value) {
        showToast('请输入手机号码和密码');
        return;
    }

    loading.value = true;

    try {
        // TODO: 实现登录逻辑
        router.push('/home');
        showToast('登录成功');
    } catch (error) {
        console.error('登录失败:', error);
    } finally {
        loading.value = false;
    }
};

const goToRegister = () => {
    router.push('/register');
};

const forgotPassword = () => {
    router.push('/forgot-password');
};

const goBack = () => {
    router.go(-1);
};
</script>

<template>
    <div class="login-page">
        <page-header title="登录" />

        <div class="login-content">
            <div class="logo-section">
                <img src="@/assets/logo.svg" alt="Logo" class="logo">
                <h1 class="app-name">医预通</h1>
            </div>

            <van-form @submit="onSubmit">
                <van-field v-model="phone" name="phone" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div class="forgot-password">
                    <router-link to="/forgot-password">忘记密码?</router-link>
                </div>
            </van-form>

            <div class="action-buttons">
                <van-button type="primary" block @click="onSubmit" :loading="loading">登录</van-button>
                <div class="register-link">
                    还没有账号？<router-link to="/register">立即注册</router-link>
                </div>
            </div>

            <div class="other-login">
                <div class="divider">
                    <span>其他登录方式</span>
                </div>
                <div class="social-icons">
                    <van-icon name="wechat" size="24" color="#07c160" />
                    <van-icon name="qq" size="24" color="#1989fa" />
                    <van-icon name="weibo" size="24" color="#ff8200" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.login-page {
    min-height: 100vh;
    background: #fff;
    padding-top: 44px; // 为固定定位的header预留空间

    .login-content {
        padding: 20px;

        .logo-section {
            text-align: center;
            margin-bottom: 40px;

            .logo {
                width: 80px;
                height: 80px;
                margin-bottom: 16px;
            }

            .app-name {
                font-size: 24px;
                color: #333;
                margin: 0;
            }
        }

        .forgot-password {
            text-align: right;
            margin: 8px 0 24px;

            a {
                color: var(--primary-color);
                font-size: 14px;
                text-decoration: none;
            }
        }

        .action-buttons {
            margin-top: 24px;

            .register-link {
                text-align: center;
                margin-top: 16px;
                font-size: 14px;
                color: #666;

                a {
                    color: var(--primary-color);
                    text-decoration: none;
                }
            }
        }

        .other-login {
            margin-top: 40px;

            .divider {
                position: relative;
                text-align: center;
                margin-bottom: 20px;

                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    width: 30%;
                    height: 1px;
                    background: #eee;
                }

                &::before {
                    left: 0;
                }

                &::after {
                    right: 0;
                }

                span {
                    background: #fff;
                    padding: 0 10px;
                    color: #999;
                    font-size: 14px;
                }
            }

            .social-icons {
                display: flex;
                justify-content: center;
                gap: 32px;
            }
        }
    }
}
</style>